<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-router</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            color:#f60;
        }
    </style>
    <script>
        //1、定义（路由）组件
        var Home= {
            template:'#home'
        }
        var News = {
            template:'#news'
        }
        //2、定义路由-配置路由
        const routes = [ 
            {path:'/home',name:'home',component:Home},
            {path:'/news/:id/:name',name:'news',component:News},
            // {path:'/news',name:'news',component:News},
            {path:'/',redirect:'/home'}
        ];
        //routers.push('/home'); //编程式
        //3、创建router 实例
        const router =new VueRouter({  //router实例
            routes,
            linkActiveClass:'active', //模糊匹配样式
            //linkExactActiveClass:'active' //精确匹配样式
            //mode:
        });
        //4、创建和挂载根实例
        var vm=null;
        window.onload=function(){
            vm = new Vue({
                el:'#my',
                router,
                data:{
                    id:789,
                }
            });
        };
    </script>
</head>
<template id="home">
    <div>
        <h3>组件home{{$route.query.id}}</h3>
    </div>
</template>
<template id='news'>
    <div>
        <h3>组件news{{$route.params.id+$route.params.name}}</h3>
    </div>
</template>
<body>
    <div id="my">
        <router-link :to="{name:'home',query:{id:10}}">home</router-link>
         <!-- <router-link :to="{path:'/home'}">home</router-link> -->
        <!-- <router-link to="/home">home</router-link> -->
        <!-- <router-link :to="{name:'home'}">home</router-link> -->
        <router-link :to="'/news/33/'+id">news</router-link>
        <!-- <router-link :to="{name:'news',params:{id:11}}">news</router-link> -->
        <!-- <router-link to="/news">news</router-link> -->
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>